<template>
    <div class="container yuan-container">

        <a-card title="知识库管理">

            <div class="filter-panel">
                <div class="filter-list">
                    <img style="height:32px;margin-right:10px" :src="require('@/assets/img/ai.png')" />
                    <span>知识引擎将对导入的文档进行学习，并基于文档进行作答</span>
                </div>

                <a-button style="float:right" type="primary" class="filter-list" @click="add">新增</a-button>

            </div>
            <div class="table">
                <a-table bordered :loading="loading" :rowKey="(item,i)=>item.id" :columns="columns" :data-source="pageList"
                    :pagination="pagination">
                    <template slot='action' slot-scope="text, record, index">
                        <div>
                            <a-popconfirm okText="确定" cancelText="取消" title="是否删除该文件" @confirm="clickDelete(record)">
                                <a-button type="dangernull" class="list-btn">删除</a-button>
                            </a-popconfirm>
                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>
        <a-modal width="900px" :visible="detailVisible" title="新增文档" @ok="modalOk" @cancel="detailVisible=false" cancelText="取消"
            okText="确定">
            <a-spin tip="Loading..." :spinning="loading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '100px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-box yuan-form-col5">
                            <a-form-model-item class="yuan-form-item" label="选择文件" prop="name">
                                <a-upload name="file" :before-upload="beforeUpload" :file-list="fileList" @change="handleChange"
                                    accept=".pdf,.word,.txt">
                                    <a-button> <a-icon type="upload" /> 点击上传 </a-button>
                                    <span class="c-danger" style="margin-left:5px">限上传pdf、word和txt文档</span>
                                </a-upload>
                            </a-form-model-item>
                        </div>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>
<script lang="ts">
import api from "@/api/api";
import { Component, Vue } from "vue-property-decorator";
@Component({
    name: "tpl",
    components: {},
})
export default class extends Vue {
    loading = false;
    detailVisible = false;
    pageList = [];
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    columns = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "file_name",
            key: "file_name",
            title: "文件",
        },
        // {
        //     align: "center",
        //     dataIndex: "executeTime",
        //     key: "executeTime",
        //     title: "上传时间",
        // },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 240,
            scopedSlots: { customRender: "action" },
        },
    ];
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await api.chatUploadList({});
            const data = res.data || [];

            this.pageList = data.map((item) => ({ file_name: item }));
            this.pagination.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }

    mounted() {
        this.getList();
    }
    add() {
        this.fileList = [];
        this.detailVisible = true;
    }
    async modalOk() {
        this.loading = true;
        try {
            let formData = new FormData();
            console.info(this.fileList);
            formData.append("file", this.fileList[0]);
            const res = await api.chatUpload(formData);
            this.detailVisible = false;
            this.resetList();
        } finally {
            this.loading = false;
        }
    }
    fileList: any[] = [];
    beforeUpload(file) {
        return false;
    }

    async clickDelete(item) {
        this.loading = true;
        try {
            await api.deleteChatUpload({ fileName: item.file_name });
            this.$message.success("删除成功");
            this.getList();
        } finally {
            this.loading = false;
        }
    }
    handleChange(info) {
        const len = info.fileList.length;
        if (len > 0) {
            this.fileList = [info.fileList[len - 1].originFileObj];
        } else {
            this.fileList = [];
        }
    }
}
</script>
<style scoped lang="scss">
.container {
}
</style>
